<script setup lang="ts">
import { getSequenceApi, saveFormPostApi } from '@/api/system'
import { ElMessage, type FormInstance, type FormRules } from 'element-plus'
import { ref } from 'vue'
import { department, yesOrNos } from '../../dictionary'
import { usetreeStore } from '@/stores/index'
import type Node from 'element-plus/es/components/tree/src/model/node'
import { reactive } from 'vue'
import { convertTreeLabel } from '@/utils/publicMethods'

const props = defineProps<{
  isShow: boolean
  title: string
  formInfo: any
}>()
const emit = defineEmits<{
  (e: 'update:isShow', value: boolean): void
  (e: 'getList'): void
}>()
interface RuleForm {
  app_name: string // 报表名称
  etl_flow: string // ETL流程
  app_class: string // 分类目录
  etl_node: string // ETL节点
  app_description: string // 报表描述
  file_path: string // 文件路径
  app_order: number // 报表排序
  req_user: string // 需求人
  req_id: string // 需求单号
  req_date: string // 提出时间
  req_dept: string // 需求部门
  ord_type: string // 紧急工单
  creator: string // 开发人
  cost: string // 工作量
}
const ruleFormRef = ref<any>()
const rules = reactive<FormRules<RuleForm>>({
  app_name: [{ required: true, message: '请输入报表名称', trigger: 'blur' }],
  etl_flow: [{ required: true, message: '请输入ETL流程', trigger: 'blur' }],
  app_class: [{ required: true, message: '请输入分类目录', trigger: 'blur' }],
  etl_node: [{ required: true, message: '请输入ETL节点', trigger: 'blur' }],
  app_description: [{ required: true, message: '请输入报表描述', trigger: 'blur' }],
  file_path: [{ required: true, message: '请输入文件路径', trigger: 'blur' }],
  app_order: [{ required: true, message: '请输入报表排序', trigger: 'blur' }],
  req_user: [{ required: true, message: '请输入需求人', trigger: 'blur' }],
  req_id: [{ required: true, message: '请输入需求单号', trigger: 'blur' }],
  req_date: [{ required: true, message: '请输入提出时间', trigger: 'blur' }],
  req_dept: [{ required: true, message: '请输入需求部门', trigger: 'blur' }],
  ord_type: [{ required: true, message: '请输入紧急工单', trigger: 'blur' }],
  creator: [{ required: true, message: '请输入开发人', trigger: 'blur' }],
  cost: [{ required: true, message: '请输入工作量', trigger: 'blur' }]
})

const form = ref<any>({})
if (props.title === '修改属性维护') {
  form.value = { ...props.formInfo }
  form.value.app_class = [Number(props.formInfo.app_class)]
}

const defaultProps = {
  children: 'children',
  label: 'label',
  value: 'value',
  disabled: function (data: any, node: any) {
    if (node && node.level > 1) {
      return false
    } else {
      return true
    }
  }
}
const treeStore = usetreeStore()
const subClsTreeArry = JSON.parse(JSON.stringify(convertTreeLabel(treeStore.appTreeList)))
// 树结构懒加载
const subClsTreeFn = (node: Node, resolve: (data: any[]) => void) => {
  // console.log(node)
  // 树形结构地域
  if (node.level === 0) {
    const info = subClsTreeArry.map((item: any) => {
      return {
        value: item.value,
        label: item.label,
        children: item.children
      }
    })
    return resolve(info)
  }

  if (node.level > 1) {
    if (!node.data.children) {
      return resolve([])
    } else {
      setTimeout(() => {
        const data = node.data.children
        resolve(data)
      }, 100)
    }
  }
  setTimeout(() => {
    const data = node.data.children
    resolve(data)
  }, 100)
}

// 取消
const Cancel = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  emit('update:isShow', false)
}

// 获得应用ID
const getAppId = async () => {
  const params = {
    name: 'app_id',
    dbName: ''
  }
  await getSequenceApi(params)
    .then((res: any) => {
      // console.log(res)
      form.value.app_id = res
    })
    .catch(() => {
      ElMessage({ message: '获得应用ID失败', type: 'error' })
    })
}
const saveFormFn = async () => {
  props.title === '新增属性维护' ? await getAppId() : ''
  const params = {
    sqlId:
      props.title === '新增属性维护'
        ? JSON.stringify(['xlsReportMgr.insertRptCfg', 'appInfo.insertAppClassRela'])
        : JSON.stringify([
            'xlsReportMgr.updateRptCfg',
            'appInfo.deleteAppClassRela',
            'appInfo.insertAppClassRela'
          ]),
    ...form.value,
    app_class: JSON.stringify([String(form.value.app_class[0])])
  }
  await saveFormPostApi(params)
    .then((res: any) => {
      if (res === 'success') {
        emit('getList')
        emit('update:isShow', false)
        ElMessage({ message: '提交成功', type: 'success' })
      } else {
        ElMessage({ message: '提交失败', type: 'error' })
      }
    })
    .catch(() => {
      ElMessage({ message: '提交失败', type: 'error' })
    })
}

// 确定
const Confirm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      saveFormFn()
    } else {
      ElMessage({ message: '请输入完整信息', type: 'error' })
    }
  })
}

// 获得树节点
const getsubClsTreeNode = (node: any) => {
  console.log(node)
  if (form.value.app_class.length > 0) {
    form.value.app_className = node.label
  }
}
</script>
<template>
  <div>
    <el-dialog :model-value="true" :title="title" @close="Cancel(ruleFormRef)">
      <el-form :model="form" ref="ruleFormRef" :rules="rules" label-width="auto">
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="报表名称:" prop="app_name">
              <el-input v-model="form.app_name" style="width: 300px" placeholder="请输入属性值" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="ETL流程:" prop="etl_flow">
              <el-input v-model="form.etl_flow" style="width: 300px" placeholder="请输入排序" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="分类目录:" prop="app_class">
              <el-tree-select
                lazy
                :load="subClsTreeFn"
                :props="defaultProps"
                :cache-data="subClsTreeArry"
                v-model="form.app_class"
                multiple
                :multiple-limit="1"
                node-key="value"
                :render-after-expand="false"
                style="width: 300px"
                check-strictly
                check-on-click-node
                @node-click="getsubClsTreeNode"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="ETL节点:" prop="etl_node">
              <el-input v-model="form.etl_node" style="width: 300px" placeholder="请输入ETL节点" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="24">
            <el-form-item label="报表描述:" prop="app_description">
              <el-input v-model="form.app_description" :rows="4" type="textarea" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="16">
            <el-form-item label="文件路径:" prop="file_path">
              <el-input
                v-model="form.file_path"
                style="width: 300px"
                placeholder="请输入文件路径"
              />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="报表排序:" prop="app_order">
              <el-input
                v-model="form.app_order"
                style="width: 300px"
                placeholder="请输入报表排序"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="需求人:" prop="req_user">
              <el-input v-model="form.req_user" style="width: 160px" placeholder="请输入需求人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="需求单号:" prop="req_id">
              <el-input v-model="form.req_id" style="width: 160px" placeholder="请输入需求单号" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="提出时间:" prop="req_date">
              <!-- <el-input v-model="form.req_date" style="width: 100px" placeholder="请输入提出时间" /> -->
              <el-date-picker
                v-model="form.req_date"
                type="date"
                placeholder="选择提出时间"
                value-format="YYYY-MM-DD"
                style="width: 160px"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-form-item label="需求部门:" prop="req_dept">
          <!-- <el-input v-model="form.req_dept" :rows="4" type="textarea" /> -->
          <el-select v-model="form.req_dept" placeholder="请选择应用类型">
            <el-option
              v-for="item in department"
              :key="item.value"
              :label="item.value"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-row :gutter="20">
          <el-col :span="8">
            <el-form-item label="紧急工单:" prop="ord_type">
              <el-select v-model="form.ord_type" placeholder="请选择是否紧急工单">
                <el-option
                  v-for="item in yesOrNos"
                  :key="item.value"
                  :label="item.value"
                  :value="item.value"
                />
              </el-select>
              <!-- <el-input v-model="form.ord_type" style="width: 160px" placeholder="请输入紧急工单" /> -->
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="开发人:" prop="creator">
              <el-input v-model="form.creator" style="width: 160px" placeholder="请输入开发人" />
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="工作量:" prop="cost">
              <el-input v-model="form.cost" style="width: 160px" placeholder="请输入工作量" />
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <template #footer>
        <div class="dialog-footer">
          <el-button @click="Cancel(ruleFormRef)">取消</el-button>
          <el-button type="primary" @click="Confirm(ruleFormRef)"> 确定 </el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<style scoped></style>
